<template>
	<view class="">
		<van-search v-model="value" shape="round" background="#f2f2f2" placeholder="请输入搜索关键词" @search="onSearch"
			@cancel="onCancel" />
		<view v-if="!showGoods" class="hotkey">
			<van-space>
			  <van-button @click="value='按钮'" type="default" size="small">按钮</van-button>
			  <van-button type="default" size="small">按钮</van-button>
			  <van-button type="default" size="small">按钮</van-button>
			  <van-button type="default" size="small">按钮</van-button>
			</van-space>
		</view>
		<view class="goods-list" v-else>
			<van-card
			  num="2"
			  price="2.00"
			  desc="描述信息"
			  title="商品标题"
			  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
			/>
		</view>

	</view>
</template>

<script>
	import {
		ref
	} from 'vue';
	import {
		Toast
	} from 'vant';

	export default {
		setup() {
			const value = ref('');
			const onSearch = (val) => Toast(val);
			const onCancel = () => Toast('取消');
			function setHotKey(val){
				value= val;
			}
			return {
				value,
				onSearch,
				onCancel,
			};
		},
		data(){
			return {
				showGoods:true
			}
		}
	};
</script>

<style>
	.hotkey{
		width: 700rpx;
		padding: 25rpx;
	}
</style>
